<template>
  <div class="index">
      <el-row style="height: 100%;">
        <el-col style="height:31%;display:flex;flex-direction:row;aligin-items:stretch;margin-bottom:2%" >
            <!-- 累积确诊 -->
            <dv-border-box-10 style="flex:1;">
                <el-row style="height:100%">
                    <el-col style="height:30%;text-align:center;padding-top:5%">
                        <span style="font-size:13px">较上日<span style="color:#FF0000">{{today_confirm}}</span></span>
                    </el-col>
                    <el-col  style="height:35%;">
                        <dv-digital-flop :config=config1 style="width:100%;height:100%;" />
                    </el-col>
                    <el-col style="height:30%;text-align:center;">
                        <span style="font-size:14px">累计确诊</span>
                    </el-col>
                </el-row>
            </dv-border-box-10>
            <!-- 现有确诊 -->
            <dv-border-box-10 style="flex:1;">
                <el-row style="height:100%">
                    <el-col style="height:30%;text-align:center;padding-top:5%">
                        <span style="font-size:13px">较上日<span style="color:#FF0000">{{today_nowConfirm}}</span></span>
                    </el-col>
                    <el-col  style="height:35%;">
                        <dv-digital-flop :config=config2 style="width:100%;height:100%;" />
                    </el-col>
                    <el-col style="height:30%;text-align:center;">
                        <span style="font-size:14px">现有确诊</span>
                    </el-col>
                </el-row>
            </dv-border-box-10>
        </el-col>

        <el-col style="height:31%;display:flex;flex-direction:row;aligin-items:stretch;margin-bottom:2%" >
            <!-- 累积死亡 -->
            <dv-border-box-10 style="flex:1;">
                <el-row style="height:100%">
                    <el-col style="height:30%;text-align:center;padding-top:5%">
                        <span style="font-size:13px">较上日<span style="color:#A0A0A0">{{today_dead}}</span></span>
                    </el-col>
                    <el-col  style="height:35%;">
                        <dv-digital-flop :config=config3 style="width:100%;height:100%;" />
                    </el-col>
                    <el-col style="height:30%;text-align:center;">
                        <span style="font-size:14px">累计死亡</span>
                    </el-col>
                </el-row>
            </dv-border-box-10>
            <!-- 累积治愈 -->
            <dv-border-box-10 style="flex:1;">
                <el-row style="height:100%">
                    <el-col style="height:30%;text-align:center;padding-top:5%">
                        <span style="font-size:13px">较上日<span style="color:#00CC00">{{today_cure}}</span></span>
                    </el-col>
                    <el-col  style="height:35%;">
                        <dv-digital-flop :config=config4 style="width:100%;height:100%;" />
                    </el-col>
                    <el-col style="height:30%;text-align:center;">
                        <span style="font-size:14px">累计治愈</span>
                    </el-col>
                </el-row>
            </dv-border-box-10>
        </el-col>

        <el-col style="height:31%;display:flex;flex-direction:row;aligin-items:stretch;margin-bottom:2%" >
            <!-- 累计疑似 -->
            <dv-border-box-10 style="flex:1;">
                <el-row style="height:100%">
                    <el-col style="height:30%;text-align:center;padding-top:5%">
                        <span style="font-size:13px">较上日<span style="color:#9900CC">{{today_suspect}}</span></span>
                    </el-col>
                    <el-col  style="height:35%;">
                        <dv-digital-flop :config=config5 style="width:100%;height:100%;" />
                    </el-col>
                    <el-col style="height:30%;text-align:center;">
                        <span style="font-size:14px">累计疑似</span>
                    </el-col>
                </el-row>
            </dv-border-box-10>
            <!-- 累计发热 -->
            <dv-border-box-10 style="flex:1;">
                <el-row style="height:100%">
                    <el-col style="height:30%;text-align:center;padding-top:5%">
                        <span style="font-size:13px">较上日<span style="color:#FF0099">{{today_fire}}</span></span>
                    </el-col>
                    <el-col  style="height:35%;">
                        <dv-digital-flop :config=config6 style="width:100%;height:100%;" />
                    </el-col>
                    <el-col style="height:30%;text-align:center;">
                        <span style="font-size:14px">累计发热</span>
                    </el-col>
                </el-row>
            </dv-border-box-10>
        </el-col>
      </el-row >
  </div>
</template>

<script>

export default {
    data () {
        return {
            today_confirm: '+134',
            today_nowConfirm:'+66',
            today_dead:'+1',
            today_cure:'+67',
            today_suspect:'+1',
            today_fire:'+100',
            config1: {
                number: [97652],
                style: {
                    fontSize: 32,
                    fill: '#FF0000'
                }
            },
            config2: {
                number: [1435],
                style: {
                    fontSize: 32,
                    fill: '#FF0000'
                }
            },
            config3: {
                number: [4799],
                style: {
                    fontSize: 32,
                    fill: '#A0A0A0'
                }
            },
            config4: {
                number: [91418],
                style: {
                    fontSize: 32,
                    fill: '#00CC00'
                }
            },
            config5: {
                number: [1500],
                style: {
                    fontSize: 32,
                    fill: '#9900CC'
                }
            },
            config6: {
                number: [91321],
                style: {
                    fontSize: 32,
                    fill: '#FF0099'
                }
            }
        }
    },
    created () {

    },
    methods: {
        async getSomeData (){
            const res = await this.$http.get('');
            if (res.status !== 200){
                return this.$message.error("获取左上角数据失败！！！");
            }
            const result = res.data.data;
            this.config1.number = [res.total_confirm]
            this.config2.number = [res.total_now_confirm]

        },
       formatter (number) {
        const numbers = number.toString().split('').reverse()
        const segs = []

        while (numbers.length) segs.push(numbers.splice(0, 3).join(''))

        return segs.join(',').split('').reverse().join('')
       }
    }
}
</script>

<style lang="scss" scoped>
.index {
    width: 100%;
    height: 100%;
}
</style>